import React, { Fragment, useEffect, useState } from "react";
import { Link, useSearchParams } from "react-router-dom";
import Breadcrumb from "../components/Breadcrumb";
import Footer from "../components/Footer";
import Header from "../components/Header";
import Pager from "../components/Pager";
import service from "../service";

export default function Product() {
  let path = [
    { name: "首页", href: "/" },
    { name: "产品中心", href: "/product" },
  ];
  // 产品列表数据
  let [productList, setProductList] = useState([]);
  // 当前页数
  let [pageNum, setPageNum] = useState(0);
  //分页显示的总页数
  let [pageCount, setPageCount] = useState(0);
  // 获取type类型数据
  let [params, setParams] = useSearchParams();
  let type = params.get("type");
  // 挂载页面
  useEffect(
    function () {
      loadData(pageNum, type);
    },
    [type]
  );

  function loadData(pageNum, type) {
    service
      .productSelect(pageNum, type)
      .then((data) => {
        console.log(data);
        setProductList(data.data);
        setPageCount(data.pageCount);
        setPageNum(data.pageNum);
      })
      .catch((err) => console.log(err));
  }
  return (
    <>
      {/* header */}
      <Header></Header>
      {/* breadcrumb */}
      <Breadcrumb path={path}></Breadcrumb>
      {/* main */}
      <div className="main container">
        <div className="pl_header">
          <Link
            to={"/product?type=1"}
            className={type == 1 ? "cur" : undefined}
          >
            净美仕净化器
          </Link>
          <Link to="/product?type=2" className={type == 2 ? "cur" : undefined}>
            净美仕滤网
          </Link>
        </div>
        <ul className="product_list clearfloat">
          {productList.map((p, i) => (
            <Fragment key={i}>
              <li>
                <Link to={`/product_details?pid=${p.pid}`}>
                  <img src={p.pic} alt="" />
                </Link>
                <div className="pdlist_text clearfloat">
                  <h3>
                    <p>{p.model}</p>
                    <span>{p.title1}</span>
                  </h3>
                  <Link to={`/product_details?pid=${p.pid}`}>查看详情</Link>
                </div>
              </li>
            </Fragment>
          ))}
        </ul>
      </div>
      {/* 分页 */}
      <div className="pages">
        <Pager
          loadData={loadData}
          pageCount={pageCount}
          pageNum={pageNum}
        ></Pager>
      </div>
      {/* footer */}
      <div className="footer">
        <Footer></Footer>
      </div>
    </>
  );
}
